<template>
  <a-modal v-model="visible" title="拜访详情" :footer="null" :width="560" @cancel="$emit('update:visible', false)">
    <div class="top">
      <div>
        <div class="name">{{ msgVal.memberName }}</div>
        <div class="phone"><a-icon type="phone" /> {{ msgVal.phone }}</div>
      </div>
      <div>
        <div class="time">提交时间：{{ moment(msgVal.gmtCreate).format("YYYY-MM-DD HH:mm") }}</div>
      </div>
    </div>
    <div class="bottom">
      <a-row>
        <a-col :span="4">地址：</a-col>
        <a-col :span="20">{{ msgVal.visitAddress }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4">拜访时间：</a-col>
        <a-col :span="20">{{ moment(msgVal.visitTime).format("YYYY-MM-DD HH:mm") }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4">拜访照片：</a-col>
        <a-col :span="20">
          <img :src="msgVal.visitPicture" alt="" srcset="" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">拜访详情：</a-col>
        <a-col :span="20">{{ msgVal.visitInfo }}</a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import moment from "moment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    msgVal: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    moment
  }
};
</script>
<style lang="scss" scoped>
.top {
  margin: 0 0 24px 0;
  display: flex;
  justify-content: space-between;
  .name {
    font-size: 18px;
    font-weight: 500;
    color: #3c3d43;
    margin-bottom: 12px;
  }
  .phone {
    font-size: 14px;
    font-weight: 400;
    color: #55565d;
  }
  .time {
    font-size: 14px;
    font-weight: 400;
    color: #767885;
  }
}
.bottom {
  width: 100%;
  min-height: 230px;
  background: #f4f6fa;
  border-radius: 4px;
  padding: 24px;
  .ant-col-4 {
    text-align: right;
  }
  .ant-col {
    margin-bottom: 16px;
  }
  img {
    width: 96px;
    height: 72px;
    border-radius: 4px;
  }
}
</style>
